<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 300px;height:200px;background: red;position: absolute;left:0;top:0;}
        #box h3{margin:0;padding:10px;background:#000;color:#fff;}
    </style>
</head>
<body>
    <div id="box">
        <h3>这是标题</h3>
        <div class="cont">
            这是内容
        </div>
    </div>
</body>
<script>

    var box = document.querySelector("#box");
    var h3 = document.querySelector("#box h3");

    var clientW = document.documentElement.clientWidth;
    var boxW = box.offsetWidth;
    var clientH = document.documentElement.clientHeight;
    var boxH = box.offsetHeight;

    // 修改按下的事件源，即可做到在指定元素身上按下鼠标，触发拖拽功能
    h3.addEventListener("mousedown", function(eve){
        var downE = eve || window.event;
        // downE.preventDefault();

        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", up);

        function move(eve){
            var moveE = eve || window.event;
            var l = moveE.pageX - downE.offsetX;
            var t = moveE.pageY - downE.offsetY;
            if(l<0) l=0;
            if(t<0) t=0;
            if(l>clientW-boxW) l=clientW-boxW;
            if(t>clientH-boxH) t=clientH-boxH;
            box.style.left = l + "px";
            box.style.top = t + "px";
        }
        function up(){
            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", up);
        }
    });
    
</script>
</html>